<!DOCTYPE html>
<html>
	<!--面向过程-->
	<!--:实现类似淘宝首页的图片轮播，五张图片轮流按照顺序显示，1秒切换一次，如果鼠标放在图片上，则停止，鼠标移开，继续轮播；下面有5个图片索引，
	对应五张图片，在图片右下角，显示到第几张，则对应位置的圆点背景色为红色。
每张图片都是一个链接-->
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/1.css"/>
	<!-- 	<script type="text/javascript">
			var imgs=document.getElementById("bb").children;
			console.log(imgs);
			/* var index=0;
			var dingshiqi;
			function aa(){
				index++;
				if(index==imgs.length){
					index=0;
				}
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index:0;";
				}
				imgs[i].style.cssText="z-index:100;"
			}
			dingshiqi=setInterval("aa()",1000); */
		</script> -->
	</head>
	<body>
		<div class="aa">
			<ul id="bb" onmouseover="over()" onmouseout="out()">
				<li><img src="../img/1.jpg" alt=""></li>
				<li><img src="../img/2.jpg" alt=""></li>
				<li><img src="../img/3.jpg" alt=""></li>
				<li><img src="../img/4.jpg" alt=""></li>
				<li><img src="../img/5.jpg" alt=""></li>
			</ul>
			<div class="lift-bottom indexs" id="lift-bottom" onclick="cc()">&lt;</div>
			<div class="right-bottom indexs" id="right-bottom" onclick="dd()">&gt;</div>
			<ul class="cc indexs" id="ul2" onmousemove="over()" onmouseout="out()">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript">
			var imgs=document.getElementById("bb").children;
			var botton=document.getElementById("ul2").children;
			var libotts=document.getElementById("lift-bottom");
			var ribotts=document.getElementById("right-bottom");
			var index=0;
			var dingshiqi;
			aa();
			function aa(){
				dingshiqi=setInterval(function(){
					index++;
					if(index==imgs.length){
						index=0;
					}
					for(var i=0;i<imgs.length;i++){
						imgs[i].style.cssText="z-index: 0;"
						botton[i].style.cssText="background-color: #ffffff;"
					}
					imgs[index].style.cssText="z-index:100;"
					botton[index].style.cssText="background-color: #FF0000;"
					
				},1000);
			}
			function over(){
				clearInterval(dingshiqi);
			}
			function out(){
				aa();
			}
		    
			function cc(){
				clearInterval(dingshiqi);
				index--;
				if(index<0){
					index=imgs.length-1;
				}
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index:0;";
				}
				imgs[index].style.cssText="z-index:100;"
				aa();
			}
			function dd(){
				clearInterval(dingshiqi)
				index++;
				if(index>imgs.length-1){
					index=0;
				}
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
				}
				imgs[index].style.cssText="z-index: 100;"
				aa();
			}
			botton[0].onmouseover=function(){
				clearInterval(dingshiqi)
				index=0;
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
					botton[i].style.cssText="background-color: #FFFFFF;"
				}
				imgs[index].style.cssText="z-index: 100;"
			    botton[0].style.cssText="background-color: #FF0000;"  
				aa();
			}
			botton[1].onmouseover=function(){
				clearInterval(dingshiqi)
				index=1;
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
					botton[i].style.cssText="background-color: #FFFFFF;"
				}
				imgs[index].style.cssText="z-index: 100;"
				botton[1].style.cssText="background-color: #FF0000;"
				aa();
			}
			botton[2].onmouseover=function(){
				clearInterval(dingshiqi)
				index=2;
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
					botton[i].style.cssText="background-color: #FFFFFF;"
				}
				imgs[index].style.cssText="z-index: 100;"
				botton[2].style.cssText="background-color: #FF0000;"
				aa();
			}
			botton[3].onmouseover=function(){
				clearInterval(dingshiqi)
				index=3;
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
					botton[i].style.cssText="background-color: #FFFFFF;"
				}
				imgs[index].style.cssText="z-index: 100;"
				botton[3].style.cssText="background-color: #FF0000;"
				aa();
			}
			botton[4].onmouseover=function(){
				clearInterval(dingshiqi)
				index=4;
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index: 0;"
					botton[i].style.cssText="background-color: #FFFFFF;"
				}
				imgs[index].style.cssText="z-index: 100;"
				botton[4].style.cssText="background-color: #FF0000;"
				aa();
			}
		</script>
	</body>
</html>
